<template>
    <div>
  
      <el-form ref="editForm" :model="formFileds">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item >
                <el-input v-model="formFileds.text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item >
              <el-button type="primary" @click="onSubmit">查询
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2" >
            <el-form-item>
              <el-button type="primary" @click="open()">增加
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" @click="update()">刷新
              </el-button>
            </el-form-item>
          </el-col>
  
        </el-row>
      </el-form>
  
      <!--表格内容-->
      <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;" border stripe highlight-current-row
        :default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick"
        @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"  :header-cell-style="{textAlign:'center'}"
        :cell-style="{textAlign:'center'}">
        <el-table-column property="pname" label="拍卖会名称" >
        </el-table-column>
        <el-table-column property="type" label="拍卖会类型" >
        </el-table-column>
        <el-table-column property="date" label="开拍时间" >
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 5px">{{scope.row.date}}</span>
          </template>
        </el-table-column>
        <el-table-column property="notice" label="所属公告" >
            <el-link href="#" style="color:#409EFF" >沈阳拍卖</el-link>
        </el-table-column>
        <el-table-column property="name" label="拍卖师" >
        </el-table-column>
        <el-table-column label="标的" >
            <el-link href="#" style="color:#409EFF">查看</el-link>
  
        </el-table-column>
        <el-table-column property="select" label="是否支持托管" >
        </el-table-column>
        <el-table-column label="操作"  width="150px">
          <template slot-scope="scope">
            <el-button circle icon="el-icon-view" type="primary" title="预览" size="small" 
            @click="goUrl('')"></el-button>
            <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
              @click="rowEdit(scope.$index, scope.row)"></el-button>
            <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
              @click="rowDel(scope.$index, scope.row, $event);"></el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!--分页-->
      <el-pagination :page-sizes="[10, 20, 30, 40,100]" :page-size="10" :total="100"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
  
      <!-- 增加-弹出层 -->
      <AuctionAdd ref="addRef" v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog" :record="formFileds"
        @dialogClose="dialogClose"></AuctionAdd>
  
      <AuctionEdit ref="editRef" v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog" :record="formFileds"
        @dialogClose="dialogClose"></AuctionEdit>
  
    </div>
  </template>
      
  <script>
  import AuctionAdd from "@/views/auctionManage/auctionAdd.vue"
  // import Detail from "../detaile.vue"
  // import AuctionView from "../../../components/pages/auctionView.vue"
  import AuctionEdit from "@/views/auctionManage/auctionEdit.vue"
  export default {
    name: "Table",
    components: {
      // Detail,
      AuctionAdd,
      AuctionEdit
  },
    data () {
      return {
        formFileds: {
        },
        tableData: [{
          id: 0,
          number: '001',
          pname: '沈阳专场',
          type: '同步拍',
          fstatus: '待提交',
          pstatus: '待开始',
          date: '2016-05-02',
          notice: '沈阳拍卖',
          name: '王小虎',
          select: '不支持'
        },
        {
          id: 1,
          number: '001',
          pname: '沈阳专场',
          type: '同步拍',
          fstatus: '待提交',
          pstatus: '待开始',
          date: '2016-05-02',
          notice: '沈阳拍卖',
          name: '王小虎',
          select: '不支持'
        }
        ],
        isShowEditDialog: false,
        isShowAddDialog: false
      }
    },
    methods: {
      update(){
        this.$router.go(0)
      },
  
      handleRowClick (row, event, column) {
  
        // 仅选中当前行
        this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone (selection) {
  
        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose () {
  
        this.isShowEditDialog = false;
        this.isShowAddDialog = false;
      },
      rowEdit (index, row) {
        //  console.log(1111)
        // this.$refs.detailRef.handleEdit('qqqq')
  
        // //当前选中行
        this.formFileds = row;
        console.log(1)
        this.isShowEditDialog = true;
      },
      handleEdit (id) {
        this.$refs.editForm.validate(isValid => {
  
          if (!isValid) return;
  
          // 保存编辑后的数据
          Object.assign(this.tableData[id], this.formFileds);
          this.isShowEditDialog = false;
  
          // 考虑到可能编辑了日期-需要重新排序
          // ***注意：手动排序传参和表格的default-sort属性格式不太一样
          this.$refs.list.sort('date', 'descending');
  
          this.$message.success('编辑成功');
        });
      },
      goUrl(url){
        window.open(url,"_blank")
      },
      rowDel (index, row, event) {
  
        // 让当前删除按钮失焦
        event.target.blur();
  
        this.$confirm('确定要删除当前行吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
  
          this.tableData.splice(row.id, 1);
          this.$message.success('删除成功');
          return false;
        });
      },
  
      //打开增加拍卖项目窗口
  
      open () {
        console.log(2);
        this.isShowAddDialog = true;
      }
    }
  }
  </script>
      
  <style scoped lang="less">
  .el-form {
    padding: 0 10px;
  }
  
  .el-date-editor {
    width: 100% !important;
  }
  </style>
      